<template>
  <div>
    <Table
      @add="openAddDialog"
      @edit="openEditDialog"
      @delete="openDeleteDialog"
      class="rounded-0 payment-table"
      :rounded="false"
      :headers="paymentHeaders"
      :items="propItems"
      addTooltip="Add Phases"
      editTooltip="Edit Phases"
      deleteTooltip="Delete Phases"
      hide-default-footer
    ></Table>
    <Dialog
      @submit="save"
      v-model="showDialog"
      :show-save="showSaveBtn"
      :title="dialogTitle"
      width="480"
    >
      <DeletePhases
        v-if="step === 3 && currentPhases"
        @delete="deletePhases"
        :phases="currentPhases"
      ></DeletePhases>
      <AddEditPhases
        v-else
        ref="addEditPhases"
        :backfill="currentPhases"
      ></AddEditPhases>
    </Dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import DeletePhases from "@/components/Quotation/Dialog/Payment/DeletePhases.vue";
import AddEditPhases from "@/components/Quotation/Dialog/Payment/AddEditPhases.vue";
interface IPhases {
  id: string;
  phases: string;
  description: string;
  percentage: string;
}
@Component({
  components: {
    Table,
    Dialog,
    DeletePhases,
    AddEditPhases,
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class Payment extends Vue {
  // 1.addPhases 2.editPhases 3.deletePhases
  step = -1;
  // dialog
  showSaveBtn = false;
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // phases
  currentPhases: IPhases | null = null;
  paymentHeaders = [
    {
      text: "Phases",
      value: "phases",
    },
    {
      text: "Description",
      value: "description",
    },
    {
      text: "Percentage",
      value: "percentage",
    },
    {
      value: "action",
      align: "right",
    },
  ];

  get propItems(): IPhases[] {
    return this.$props.items;
  }

  // action
  openAddDialog() {
    this.step = 1;
    this.currentPhases = null;
    this.showSaveBtn = true;
    this.dialogTitle = "Add phases";
    this.openDialog();
  }
  openEditDialog(phases: IPhases) {
    this.step = 2;
    this.currentPhases = phases;
    this.showSaveBtn = true;
    this.dialogTitle = "Edit phases";
    this.openDialog();
  }
  openDeleteDialog(phases: IPhases) {
    this.step = 3;
    this.currentPhases = phases;
    this.showSaveBtn = false;
    this.dialogTitle = "Delete phases";
    this.openDialog();
  }
  async save() {
    const result = await (
      this.$refs.addEditPhases as AddEditPhases
    ).saveFormData();
    if (result) {
      if (this.step === 1) {
        this.addPhases(result);
      } else if (this.step === 2) {
        this.editPhases(result);
      }
      this.closeDialog();
    }
  }
  addPhases(item: IPhases) {
    item.id = String(new Date().getTime());
    this.propItems.push(item);
  }
  editPhases(item: IPhases) {
    Object.assign(this.currentPhases as IPhases, item);
  }
  deletePhases(item: IPhases) {
    const index = this.propItems.indexOf(item);
    console.log(index);
    if (index >= 0) {
      this.propItems.splice(index, 1);
      this.closeDialog();
      this.currentPhases = null;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./Payment.scss";
</style>
